<script setup lang="ts">
import FullScreen from '@/components/FullScreen/FullScreen.vue'
import FullScreenItem from '@/components/FullScreen/FullScreenItem.vue'
import MusicBox from '@/components/MusicBox/MusicBox.vue'
import TitleBar from '@/components/TitleBar/TitleBar.vue'
import LanguageBar from '@/components/LanguageBar/LanguageBar.vue'
import NavigationBar from '@/components/NavigationBar/NavigationBar.vue'
import { useI18n } from 'vue-i18n'
import { computed, onBeforeMount, onUnmounted, reactive, ref, useTemplateRef } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import type { ComponentExposed } from 'vue-component-type-helpers'
import axios from '@/axios.ts'

interface Rule {
  name: string
  email: string
  phone: string
  theme: string
  content: string
}

const { t, locale } = useI18n()
let timer: ReturnType<typeof setTimeout>
const screenRef = useTemplateRef<ComponentExposed<typeof FullScreen>>('screen')

const visibilityOne = computed(() => {
  return Object.is(index.value, 0)
})
const visibilityTwo = computed(() => {
  return Object.is(index.value, 1)
})
const visibilityThree = computed(() => {
  return Object.is(index.value, 2)
})
const index = ref(0)
const content = ref<string>()

const ruleFormRef = ref<FormInstance>()
const form = reactive<Rule>({
  name: '',
  email: '',
  phone: '',
  theme: '',
  content: '',
})
const formRules = computed<FormRules<Rule>>(() => {
  return {
    name: [
      {
        required: true,
        message: t('system.validateName'),
        trigger: 'blur',
      },
    ],
    email: [
      {
        required: true,
        message: t('system.validateEmail'),
        trigger: 'blur',
      },
      {
        pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        message: t('system.emailError'),
        trigger: 'blur',
      },
    ],
    phone: [
      {
        required: true,
        message: t('system.validatePhone'),
        trigger: 'blur',
      },
      {
        pattern: /^1([3-9])\d{9}$/,
        message: t('system.phoneError'),
        trigger: 'blur',
      },
    ],
    theme: [
      {
        required: true,
        message: t('system.validateTheme'),
        trigger: 'blur',
      },
    ],
    content: [
      {
        required: true,
        message: t('system.validateContent'),
        trigger: 'blur',
      },
    ],
  }
})

//导航切换跳转
const handleNavChange = (index: number) => {
  if (screenRef.value) {
    screenRef.value.handleScrollTo(index)
  }
}
//发送
const handleSubmit = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      axios
        .post(`${window.location.origin}/api/mail/sendEmail`, {
          to: form.email,
          name: form.name,
          phone: form.phone,
          subject: form.theme,
          content: form.content,
        })
        .then(() => {
          if (ruleFormRef.value) {
            ruleFormRef.value.resetFields()
          }
          ElMessage.success({
            message: '消息发送成功,我将会第一时间查看，如果方便可直接电联以免遗漏消息哦！',
            duration: 3000,
          })
        })
    }
  })
}
//逐字跳
const wordByFrame = () => {
  const text = '世上只有想不通的人，没有走不通的路。'
  let i = 0
  timer = setInterval(() => {
    const str = text.substring(0, i)
    content.value = str + '_'
    i++
    if (i > text.length) i = 0
  }, 600)
}
onBeforeMount(() => {
  wordByFrame()
})
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <full-screen class="select-none" ref="screen" @change="(value) => (index = value)">
    <full-screen-item
      class="pb-[10vh] flex items-end justify-center bg-cover bg-center bg-no-repeat bg-[url('../assets/img/intro-bg.jpg')]">
      <div class="text-center font-medium text-[#555] sm:text-[22px] max-sm:text-[4vm]">
        <template v-if="locale === 'zh-CN'">
          <p class="superShadow">{{ content }}</p>
        </template>
        <template v-else>
          <p class="superShadow">
            There are only people who can't think of it in the world. There is no way out.
          </p>
        </template>
        <Transition
          enter-active-class="animate__animated animation-delay-[100ms] animate__zoomInUp"
          leave-active-class="animate__animated animation-delay-[100ms] animate__backOutDown">
          <p v-if="visibilityOne">
            {{ t('system.name') }}
          </p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[200ms] animate__zoomInUp"
          leave-active-class="animate__animated animation-delay-[200ms] animate__backOutDown">
          <p v-if="visibilityOne">{{ t('system.job') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[300ms] animate__zoomInUp"
          leave-active-class="animate__animated animation-delay-[300ms] animate__backOutDown">
          <p v-if="visibilityOne">{{ t('system.area') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[400ms] animate__zoomInUp"
          leave-active-class="animate__animated animation-delay-[400ms] animate__backOutDown">
          <p v-if="visibilityOne" style="user-select: all">
            <a href="tel:18046050822" style="color: inherit; font-variant: oldstyle-nums"
              >18046050822</a
            >
          </p>
        </Transition>
      </div>
    </full-screen-item>
    <full-screen-item
      class="flex flex-col items-center bg-cover bg-center bg-no-repeat bg-[url('../assets/img/3.jpg')]">
      <title-bar>{{ t('system.menu.aboutMe') }}</title-bar>
      <div class="text-[18px] text-white p-[50px] max-sm:hidden">
        {{ t('system.sentenceOne') }}
      </div>
      <div class="w-full flex justify-around m-auto max-sm:flex-1 max-sm:flex-col">
        <div class="flex-1 max-sm:hidden flex items-center justify-center">
          <img
            class="sm:w-[250px] sm:h-[250px] max-sm:w-[40vw] max-sm:h-[40vw] block rounded-[50%] border-8 border-white/10 transition-all duration-1000 hover:scale-150 hover:transform-gpu hover:rotate-[360deg]"
            src="../assets/img/img.jpg"
            alt="" />
        </div>

        <div
          class="flex-1 sm:text-[20px] max-sm:text-[3.5vw] text-white leading-2 sm:p-[15px_30px] max-sm:p-[5vw_10vw]">
          <Transition
            enter-active-class="animate__animated animation-delay-[100ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[100ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.fullName') }} : {{ t('system.fullName', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[200ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[200ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.sex') }} : {{ t('system.sex', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[300ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[300ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.birthtime') }} : {{ t('system.birthtime', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[400ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[400ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.residence') }} : {{ t('system.residence', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[500ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[500ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.education') }} : {{ t('system.education', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[600ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[600ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.major') }} : {{ t('system.major', 0) }}</p>
          </Transition>
        </div>
        <div
          class="flex-1 sm:text-[20px] max-sm:text-[3.5vw] text-white leading-2 sm:p-[15px_30px] max-sm:p-[5vw_10vw]">
          <Transition
            enter-active-class="animate__animated animation-delay-[100ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[100ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.phone') }} : {{ t('system.phone', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[200ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[200ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">
              {{ t('system.email') }} :
              <a href="mailto:447618716@qq.com">447618716@qq.com</a>
            </p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[300ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[300ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.tencent') }} : {{ t('system.tencent', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[400ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[400ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.source') }} : {{ t('system.source', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[500ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[500ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">{{ t('system.school') }} : {{ t('system.school', 0) }}</p>
          </Transition>
          <Transition
            enter-active-class="animate__animated animation-delay-[600ms] animate__fadeInBottomLeft"
            leave-active-class="animate__animated animation-delay-[600ms] animate__fadeOutBottomLeft">
            <p v-if="visibilityTwo">
              {{ t('system.graduation') }} : {{ t('system.graduation', 0) }}
            </p>
          </Transition>
        </div>
      </div>
    </full-screen-item>
    <full-screen-item
      class="flex flex-col items-center bg-cover bg-center bg-no-repeat bg-[url('../assets/img/4.jpg')]">
      <title-bar>{{ t('system.menu.ability') }}</title-bar>
      <div class="text-[18px] text-white p-[50px] max-sm:hidden">
        {{ t('system.sentenceTwo') }}
      </div>
      <div class="sm:text-[20px] max-sm:text-[3.2vw] text-white m-auto leading-2 max-sm:p-[5vw]">
        <Transition
          enter-active-class="animate__animated animation-delay-[100ms] animate__lightSpeedInRight"
          leave-active-class="animate__animated animation-delay-[100ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textOne') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[200ms] animate__lightSpeedInLeft"
          leave-active-class="animate__animated animation-delay-[150ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textTwo') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[300ms] animate__lightSpeedInRight"
          leave-active-class="animate__animated animation-delay-[200ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textThree') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[400ms] animate__lightSpeedInLeft"
          leave-active-class="animate__animated animation-delay-[250ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textFour') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[500ms] animate__lightSpeedInRight"
          leave-active-class="animate__animated animation-delay-[300ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textFive') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[600ms] animate__lightSpeedInLeft"
          leave-active-class="animate__animated animation-delay-[350ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textSix') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[700ms] animate__lightSpeedInRight"
          leave-active-class="animate__animated animation-delay-[400ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textSeven') }}</p>
        </Transition>
        <Transition
          enter-active-class="animate__animated animation-delay-[800ms] animate__lightSpeedInLeft"
          leave-active-class="animate__animated animation-delay-[450ms] animate__zoomOutDown">
          <p v-show="visibilityThree">{{ t('system.textEight') }}</p>
        </Transition>
      </div>
    </full-screen-item>
    <full-screen-item
      class="flex flex-col items-center bg-cover bg-center bg-no-repeat bg-[url('../assets/img/2.jpg')]">
      <title-bar>{{ t('system.menu.experience') }}</title-bar>
      <div class="text-[18px] text-white p-[50px] max-sm:hidden">
        {{ t('system.sentenceThree') }}
      </div>
      <el-row class="w-full sm:justify-around max-sm:p-[5vw]" type="flex">
        <div class="max-sm:text-[3vw] max-sm:mt-[2vw] max-sm:w-full bg-white rounded">
          <el-row
            class="p-[1vw] max-sm:p-[2vw] border-b border-b-gray-200"
            type="flex"
            align="middle"
            justify="space-between">
            <span class="flex-1">Resume</span>
            <el-button class="max-sm:text-[3vw]!" text
              ><a href="https://gitee.com/xierongsheng/resume" target="_blank">预览</a></el-button
            >
          </el-row>
          <div class="p-[1vw] max-sm:p-[2vw]">
            <h4>当前项目 Vue3+TypeScript</h4>
          </div>
        </div>

        <div class="max-sm:text-[3vw] max-sm:mt-[2vw] max-sm:w-full bg-white rounded">
          <el-row
            class="p-[1vw] max-sm:p-[2vw] border-b border-b-gray-200"
            type="flex"
            align="middle"
            justify="space-between">
            <span class="flex-1">mail-server</span>
            <el-button class="max-sm:text-[3vw]!" text
              ><a href="https://gitee.com/xierongsheng/mail-server" target="_blank"
                >预览</a
              ></el-button
            >
          </el-row>
          <div class="p-[1vw] max-sm:p-[2vw]">
            <h4>邮件服务</h4>
          </div>
        </div>

        <div class="max-sm:text-[3vw] max-sm:mt-[2vw] max-sm:w-full bg-white rounded">
          <el-row
            class="p-[1vw] max-sm:p-[2vw] border-b border-b-gray-200"
            type="flex"
            align="middle"
            justify="space-between">
            <span class="flex-1">vite-template-vue3-ts</span>
            <el-button class="max-sm:text-[3vw]!" text
              ><a href="https://gitee.com/xierongsheng/vite-template-vue3-ts" target="_blank"
                >预览</a
              ></el-button
            >
          </el-row>
          <div class="p-[1vw] max-sm:p-[2vw]">
            <h4>vue3+TypeScript项目模版</h4>
          </div>
        </div>

        <div class="max-sm:text-[3vw] max-sm:mt-[2vw] max-sm:w-full bg-white rounded">
          <el-row
            class="p-[1vw] max-sm:p-[2vw] border-b border-b-gray-200"
            type="flex"
            align="middle"
            justify="space-between">
            <span class="flex-1">vite-template-uniapp-vue3-ts</span>
            <el-button class="max-sm:text-[3vw]!" text
              ><a href="https://gitee.com/xierongsheng/vite-template-uniapp-vue3-ts" target="_blank"
                >预览</a
              ></el-button
            >
          </el-row>
          <div class="p-[1vw] max-sm:p-[2vw]">
            <h4>uniapp工程化项目模版</h4>
          </div>
        </div>
        <div class="max-sm:text-[3vw] max-sm:mt-[2vw] max-sm:w-full bg-white rounded">
          <el-row
            class="p-[1vw] max-sm:p-[2vw] border-b border-b-gray-200"
            type="flex"
            align="middle"
            justify="space-between">
            <span class="flex-1">supermarket</span>
            <el-button class="max-sm:text-[3vw]!" text
              ><a href="https://github.com/x447618716/supermarket" target="_blank"
                >预览</a
              ></el-button
            >
          </el-row>
          <div class="p-[1vw] max-sm:p-[2vw]">
            <h4>生鲜超市</h4>
          </div>
        </div>
      </el-row>
    </full-screen-item>
    <full-screen-item
      class="flex flex-col items-center bg-cover bg-center bg-no-repeat bg-[url('../assets/img/1.jpg')]">
      <title-bar>{{ t('system.menu.contactMe') }}</title-bar>
      <div class="text-[18px] text-white p-[50px] max-sm:hidden">
        {{ t('system.sentenceFour') }}
      </div>
      <el-row
        class="w-[80%] sm:h-[300px] max-sm:h-[60vm] max-sm:flex-col"
        type="flex"
        justify="space-around">
        <el-row
          class="sm:flex-col max-sm:items-start max-sm:p-[3vw_0] flex-nowrap!"
          type="flex"
          align="middle">
          <i
            class="sx-icon-dizhi text-white sm:text-[45px]! sm:p-[10px] max-sm:text-[6vw]! max-sm:p-[1.2vw]"></i>
          <p class="sm:text-[25px] max-sm:text-[4vw] text-white leading-2.5 line-clamp-1">
            {{ t('system.position') }}
          </p>
        </el-row>
        <el-row
          class="sm:flex-col max-sm:items-start max-sm:p-[3vw_0] flex-nowrap!"
          type="flex"
          align="middle">
          <i
            class="sx-icon-youxiang text-white sm:text-[45px]! sm:p-[10px] max-sm:text-[6vw]! max-sm:p-[1.2vw]"></i>
          <p class="sm:text-[25px] max-sm:text-[4vw] text-white leading-2.5 line-clamp-1">
            <a href="mailto:447618716@qq.com">447618716@qq.com</a>
          </p>
        </el-row>
        <el-row
          class="sm:flex-col max-sm:items-start max-sm:p-[3vw_0] flex-nowrap!"
          type="flex"
          align="middle">
          <i
            class="sx-icon-dianhua text-white sm:text-[45px]! sm:p-[10px] max-sm:text-[6vw]! max-sm:p-[1.2vw]"></i>
          <p class="sm:text-[25px] max-sm:text-[4vw] text-white leading-2.5 line-clamp-1">
            <a href="tel:18046050822" style="color: inherit">18046050822</a>
          </p>
        </el-row>
      </el-row>
      <el-form
        class="w-[80%] flex-1"
        ref="ruleFormRef"
        :model="form"
        :rules="formRules"
        label-width="0">
        <el-row
          class="w-full max-sm:flex-col"
          type="flex"
          justify="space-between"
          style="width: 100%">
          <el-form-item prop="name">
            <el-input
              v-model="form.name"
              :placeholder="t('system.validateName')"
              style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="form.email"
              :placeholder="t('system.validateEmail')"
              style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="form.phone"
              :placeholder="t('system.validatePhone')"
              style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item prop="theme">
            <el-input
              v-model="form.theme"
              :placeholder="t('system.validateTheme')"
              style="width: 100%"></el-input>
          </el-form-item>
        </el-row>
        <el-form-item prop="content">
          <el-input
            type="textarea"
            v-model="form.content"
            :rows="3"
            :placeholder="t('system.validateContent')"></el-input>
        </el-form-item>
        <el-button @click="handleSubmit">发送</el-button>
      </el-form>
    </full-screen-item>
  </full-screen>
  <music-box :root="visibilityOne" />
  <language-bar class="fixed right-5 top-5" />
  <navigation-bar :index="index" @change="handleNavChange"></navigation-bar>
</template>

<style lang="css" scoped>
p {
  line-height: 2.5;
}
.superShadow {
  text-shadow:
    0 1px 0 hsl(174, 5%, 80%),
    0 2px 0 hsl(174, 5%, 75%),
    0 3px 0 hsl(174, 5%, 70%),
    0 4px 0 hsl(174, 5%, 66%),
    0 5px 0 hsl(174, 5%, 64%),
    0 6px 0 hsl(174, 5%, 62%),
    0 7px 0 hsl(174, 5%, 61%),
    0 8px 0 hsl(174, 5%, 60%),
    0 0 5px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.2),
    0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.3);
}
</style>
